<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>

        <ion-title>
            <h1>{{ 'core.more' | translate }}</h1>
        </ion-title>

        <ion-buttons slot="end">
            <core-user-menu-button />
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-list>
        @if ((!handlers || !handlers.length) && !handlersLoaded) {
            <ion-item class="ion-text-center">
                <ion-label>
                    <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                </ion-label>
            </ion-item>
        }
        <ion-item button *ngFor="let handler of handlers" [class]="['core-moremenu-handler', handler.class]"
            (click)="openHandler(handler)" [attr.aria-label]="handler.title | translate" [detail]="true">
            <ion-icon [name]="handler.icon" slot="start" aria-hidden="true" />
            <ion-label>
                <p class="item-heading">{{ handler.title | translate}}</p>
            </ion-label>
            @if (handler.showBadge) {
                <ion-badge slot="end" [hidden]="handler.loading || !handler.badge" aria-hidden="true">
                    {{handler.badge}}
                </ion-badge>
                @if (handler.badge && handler.badgeA11yText) {
                    <span class="sr-only">
                        {{ handler.badgeA11yText | translate: {$a : handler.badge } }}
                    </span>
                }
                @if (handler.loading) {
                    <ion-spinner slot="end" [attr.aria-label]="'core.loading' | translate" />
                }
            }
        </ion-item>
        <ng-container *ngFor="let item of customItems">
            @if (item.type !== 'embedded') {
                <ion-item button [href]="item.url" [attr.aria-label]="item.label" core-link [capture]="item.type === 'app'"
                    [inApp]="item.type === 'inappbrowser'" class="core-moremenu-customitem" [detail]="true"
                    [detailIcon]="item.type === 'browser' ? 'open-outline' : 'chevron-forward'">
                    <ion-icon [name]="item.icon" slot="start" aria-hidden="true" />
                    <ion-label>
                        <p class="item-heading">{{item.label}}</p>
                    </ion-label>
                </ion-item>
            } @else {
                <ion-item button (click)="openItem(item)" [attr.aria-label]="item.label" class="core-moremenu-customitem" [detail]="true">
                    <ion-icon [name]="item.icon" slot="start" aria-hidden="true" />
                    <ion-label>
                        <p class="item-heading">{{item.label}}</p>
                    </ion-label>
                </ion-item>
            }
        </ng-container>
        @if (showScanQR) {
            <ion-item button (click)="scanQR()" [detail]="true">
                <ion-icon name="fas-qrcode" slot="start" aria-hidden="true" />
                <ion-label>
                    <p class="item-heading">{{ 'core.scanqr' | translate }}</p>
                </ion-label>
            </ion-item>
        }
    </ion-list>
</ion-content>
<ion-footer>
    <ion-item button (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate" [detail]="true">
        <ion-icon name="fas-gears" slot="start" aria-hidden="true" />
        <ion-label>
            <p class="item-heading">{{ 'core.settings.appsettings' | translate }}</p>
        </ion-label>
    </ion-item>
</ion-footer>
